<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格</title>
</head>
<body>
<div id="tableContainer">
    <table id="dataTable">

    </table>

</div>

<div id="toolbar">
    <button>添加</button>
    <button>修改</button>

</div>
</body>
<script src="../data/cities.js"></script>
<script>

    var dataTable = document.getElementById('dataTable');
    dataTable.style.border='1px solid'

    for(var i=0;i<cities.length;i++){

        var tRow= document.createElement('tr');

        var td_id=document.createElement('td');
        td_id.innerText = cities[i].id;

        var td_name=document.createElement('td');
        td_name.innerText = cities[i].name;

        tRow.appendChild(td_id);
        tRow.appendChild(td_name);

        dataTable.appendChild(tRow);

    }

     var tableContainer = document.getElementById('tableContainer');
     var toolBar = document.getElementById('toolbar');

     tableContainer.insertBefore(toolBar,dataTable);
</script>
</html>
